// 轮播图
var contain = document.querySelector('.contain');
var slide = document.getElementsByClassName('slide');
var lbtn = document.querySelector('.left');
var rbtn = document.querySelector('.right');
var circles = document.querySelectorAll('.indicator>li');
var left = slide[0].offsetLeft;
var width = document.body.clientWidth;
var index = 0;
var timer = null;
var sl = slide[0].querySelectorAll('.sl');
var sl_length = sl.length;
var num = 0;
var newwidth = 0;
var isClick = true;
//num：0，1，2，3，4，5
//pic：4，1，2，3，4，1
// 放缩时重新获得屏幕宽度
window.onresize = function(){
    var leftsize = document.body.clientWidth;
    // 当宽度和初始宽度不同且不是第一张图
    if(leftsize!=left && num>0){
        this.slide[0].style.transition = 'none';
        this.slide[0].style.left = -leftsize + 'px';//直接变成第一张
    }
}
// 向右点击，也用于自动播放
rbtn.onclick = function(){
    

    if(isClick){
        isClick=false;

        num++;
        newwidth = document.body.clientWidth;//屏幕宽度
        // 1号图片，最后一张，再向右时，num==2
        if(num>sl_length-1){
           num = 2;
        }
        turnright(newwidth);
        // 当num==5
        if(num == sl_length-1){
            setTimeout(function del(){
                slide[0].style.transition = 'none';
                slide[0].style.left = -newwidth + 'px';
                //1s内马上切换到1号图片
            },1000);
        }

        setTimeout(function() {
            isClick = true;
        }, 1000);//一秒内不能重复点击
    }
}

lbtn.onclick = function(){
    if(isClick){
        isClick=false;

        num--;
        newwidth = document.body.clientWidth;
        //4号图片，第一张，再向左时，num==5
        if(num<0){
            num = sl_length-1;
        }
        turnright(newwidth);
        if(num == 1){
            setTimeout(function del(){
                slide[0].style.transition = 'none';
                slide[0].style.left = -newwidth*(sl_length-1) + 'px';
                num = sl_length-1;
                //1s内马上切换到最后一张，num变成5
            },1000);
        }
        setTimeout(function() {
            isClick = true;
        }, 1000);//一秒内不能重复点击
    }
}

// lbtn.addEventListener('click',lbtnf);
// function lbtnf(){
//     // var flag = 0;
//     num--;
//     newwidth = document.body.clientWidth;
//     //4号图片，第一张，再向左时，num==5
//     if(num<0){
//         num = sl_length-1;
//     }
//     turnright(newwidth);
//     if(num == 1){
//         setTimeout(function del(){
//             slide[0].style.transition = 'none';
//             slide[0].style.left = -newwidth*(sl_length-1) + 'px';
//             num = sl_length-1;
//             //1s内马上切换到最后一张，num变成5
//         },1000);
//     }
//     // if(flag==1){
//     //     lbtn.removeEventListener('click',lbtnf);
//     //     return false;        
//     // }
//     // else{         
//     //     lbtn.addEventListener('click',lbtnf);   
//     //     return true;        
//     // }
// }

//小圆点索引
for(var i = 0;i<circles.length;i++){
    circles[i].setAttribute('p_index',i);
    circles[i].onclick = function(){
        num = this.getAttribute('p_index');
        newwidth = document.body.clientWidth;
        turnright(newwidth);
    }
}
//自动播放
var timer = setInterval(function(){
    rbtn.onclick();
},4000);
//移入清除
contain.onmouseenter = function(){
    clearInterval(timer);
}
//移出恢复
contain.onmouseleave = function(){
    timer = setInterval(function(){
        rbtn.onclick();
    },4000);
}
//切换图片
function turnright(newwidth){
    slide[0].style.transition = 'left 1s linear';
    if(0<newwidth && newwidth != width){
        slide[0].style.left = -newwidth*num + 'px';
    }
    else{
        slide[0].style.left = -width*num + 'px';
    }

    for(var i = 0;i<circles.length;i++){
        circles[i].style.backgroundColor = '#eee';
        if(num<4){
            circles[num].style.backgroundColor = '#666';
        }
        //num==4，5时
        else{
            circles[num-4].style.backgroundColor = '#666';
        }
    }
}



// window.onload = function(){
    // autoplay();
    // function autoplay(){
    //         timer = setInterval(function(){
    //         left = slide[0].offsetLeft;
    //         width = document.body.clientWidth;
    //         //4.10加的
    //         for(var i = 0;i<sl.length;i++){
    //             sl[i].style.width = width;
    //         }
    //         //
    //         console.log(index);
    //         if(left==0){
    //             for(var i=0;i<circles.length;i++){
    //                 circles[i].classList.remove('li-active');
    //             }
    //             index++;
    //             circles[index].classList.add('li-active');
    //             slide[0].style.left = left-width+'px';
    //         }
    //         else if(left>(-width*3)){
    //             // slide[0].style.left = left - width +'px';
    //             for(var i=0;i<circles.length;i++){
    //                 circles[i].classList.remove('li-active');
    //             }
    //             index++;
    //             circles[index].classList.add('li-active');
    //             slide[0].style.left = left-width+'px';
    //         }
    //         else{
    //             for(var i=0;i<circles.length;i++){
    //                 circles[i].classList.remove('li-active');
    //             }
    //             index=0;
    //             circles[index].classList.add('li-active');
    //             slide[0].style.left = 0 +'px';
    //         }
    //     },4000)    
    // }

    
    // lbtn.addEventListener('click',pre);
    // rbtn.addEventListener('click',next);
    // function pre(){
    //     clearInterval(timer);
    //     left = slide[0].offsetLeft;
    //     if(left==0){
    //         slide[0].style.left = -3*width+'px';
    //         for(var i=0;i<circles.length;i++){
    //             circles[i].classList.remove('li-active');
    //         }
    //         circles[3].classList.add('li-active');
    //         index=3;
    //         setTimeout(autoplay(),2000);
    //     }
    //     else{
    //         if(-left/width==1){
    //             index=0;
    //         }
    //         else if(-left/width==2){
    //             index=1;
    //         }
    //         else{
    //             index=2;
    //         }
    //         slide[0].style.left = left+width+'px';
    //         for(var i=0;i<circles.length;i++){
    //             circles[i].classList.remove('li-active');
    //         }
    //         circles[index].classList.add('li-active');
    //         setTimeout(autoplay(),2000);
    //     }
    // }

    // function next(){
    //     clearInterval(timer);
    //     left = slide[0].offsetLeft;
    //     if(left==(-3)*width){
    //         slide[0].style.left = 0 +'px';
    //         for(var i=0;i<circles.length;i++){
    //             circles[i].classList.remove('li-active');
    //         }
    //         circles[0].classList.add('li-active');
    //         index=0;
    //         setTimeout(autoplay(),2000);
    //     }
    //     else{
    //         if(left==0){
    //             index=1;
    //         }
    //         else if(-left/width==1){
    //             index=2;
    //         }
    //         else{
    //             index=3;
    //         }
    //     }
    //     slide[0].style.left = left-width+'px';
    //         for(var i=0;i<circles.length;i++){
    //             circles[i].classList.remove('li-active');
    //         }
    //         circles[index].classList.add('li-active');
    //         setTimeout(autoplay(),2000);
    // }


// 模块切换
var main_nav = document.querySelector('.main-nav');
var main_nav_lists = main_nav.querySelectorAll('li');
var main_con = document.querySelector('.main-con');
var wraps = main_con.querySelectorAll('.wrap');
for(var i = 0 ; i < main_nav_lists.length ; i++){
    main_nav_lists[i].setAttribute('index',i);
    main_nav_lists[i].onclick = function(){
        for(var i = 0;i<main_nav_lists.length;i++){
            main_nav_lists[i].classList.remove('current');
        }
        this.classList.add('current');
        var index = this.getAttribute('index');
        for(var i = 0;i<wraps.length;i++){
            wraps[i].style.display = 'none';
            }
            wraps[index].style.display = 'block';
    }
}


// 置顶按钮
var sidebar = document.querySelector('.sidebar');

//显示用户名
var person = document.querySelector('.person');
var showname = person.querySelector('p');
showname.innerHTML = localStorage.getItem('username');

//置顶按钮点击
var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
sidebar.onclick = function smoothscroll(){
    // var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
         window.requestAnimationFrame(smoothscroll);
         window.scrollTo(0,currentScroll - (currentScroll/5));
    }
};


var contain2 = document.querySelector('.contain2');


function delayshow(){
    currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if(currentScroll>100){
        contain2.style.animation = 'slidein 2s';
    }
    else{
        contain2.style.animation = 'none';
    }
}

function sidebarshow(){
    currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if(currentScroll>0){
        sidebar.style.display = 'block';
    }
    else{
        sidebar.style.display = 'none';
    }
}

window.addEventListener('scroll',delayshow);
window.addEventListener('scroll',sidebarshow);


// 留言板
var communicate = document.querySelector('.communicate');
var communicate_input = communicate.querySelector('input');
var communicate_textarea = communicate.querySelector('textarea');
var communicate_btn = communicate.querySelector('button');
var communicate_ul = communicate.querySelector('ul');
communicate_btn.onclick = function(){
    if(communicate_textarea.value == ''||communicate_input.value == ''){
        ;
    }
    else{
        var spanname = document.createElement('span');
        var li = document.createElement('li');
        spanname.innerHTML = communicate_input.value;
        li.innerHTML = communicate_textarea.value;
        communicate_ul.appendChild(spanname);
        communicate_ul.appendChild(li);
    }
}


